<template>
  <div class="mains">
    <nav-bar class="nav-bar">
      <div slot="centers">
        <div class="title-center">
          <!-- <div class="desc">
            咨询
            <span class="line"></span>
          </div>
          <div class="sends">发圈</div> -->
          <div
            class="desc"
            v-for="(item, index) in titles"
            :key="index"
            @click="itemClick(index)"
          >
            {{ item }}
            <span :class="currentIndex == index ? 'line' : ''"></span>
          </div>
        </div>
      </div>
    </nav-bar>
    <div class="container" v-if="currentIndex == 0">
      <div class="company" @click="companyClick">
        <div class="title">
          私密最新产品上市（全新体验）欢迎你购买私密最新产品上市（全新体验）欢迎你购买
        </div>
        <div class="desc">
          这里是资讯的简介这里是资讯的简介这里是资这里是资讯的简介这里是资讯的简介这里是资
        </div>
        <div class="imgs">
          <!-- 没图片 -->
        </div>
        <div class="bottom">
          <div class="bottom-left">
            <div class="icons">
              <img src="@/assets/consulting.png" alt="" />
            </div>
            <div class="text">公司咨询</div>
          </div>
          <div class="bottom-right">
            <div class="icons">
              <img src="@/assets/eye.png" alt="" />
            </div>
            <div class="person">512</div>
          </div>
        </div>
      </div>
      <div class="product">
        <product-list :productList="productList" @productClick="productClick"></product-list>
      </div>
    </div>
    <div class="brands" v-else>
      <band class="bands"></band>
      <band-list></band-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import ProductList from './children/ProductList.vue'
import Band from './children/Band'
import BandList from './children/BandList'
export default {
  name: 'consult',
  components: {
    NavBar,
    ProductList,
    Band,
    BandList
  },
  data() {
    return {
      productList: [
        {
          title: '私密最新产品上市（全新体验）欢迎你购买',
          icons: require('@/assets/矩形 2.png'),
          desc:
            '这里是资讯的简介这里是资讯讯的简介这里是这里是资讯的简介这里是资讯讯的简介这里是这里是资讯的简介这里是资讯讯的简介这里是',
          icons2: require('@/assets/consulting.png'),
          icons3: require('@/assets/eye.png'),
          number: 520,
          id: 1,
        },
        {
          title: '私密最新产品上市（全新体验）欢迎你购买',
          icons: require('@/assets/矩形 2.png'),
          desc: '这里是资讯的简介这里是资讯讯的简介这里是',
          icons2: require('@/assets/consulting.png'),
          icons3: require('@/assets/eye.png'),
          number: 521,
          id: 2,
        },
        {
          title: '私密最新产品上市（全新体验）欢迎你购买',
          icons: require('@/assets/矩形 2.png'),
          desc:
            '这里是资讯的简介这里是资讯讯的简介这里是这里是资讯的简介这里是资讯讯的简介这里是这里是资讯的简介这里是资讯讯的简介这里是',
          icons2: require('@/assets/consulting.png'),
          icons3: require('@/assets/eye.png'),
          number: 520,
          id: 3,
        },
        {
          title: '私密最新产品上市（全新体验）欢迎你购买',
          icons: require('@/assets/矩形 2.png'),
          desc: '这里是资讯的简介这里是资讯讯的简介这里是',
          icons2: require('@/assets/consulting.png'),
          icons3:  require('@/assets/eye.png'),
          number: 521,
          id: 4,
        },
      ],
      titles: ['咨询', '发圈'],
      currentIndex: 0,
    }
  },
  methods: {
    itemClick(index) {
      console.log(23)
      this.currentIndex = index
    },
    productClick(index) {
      console.log(index);
      this.$router.push({
        name: 'consultDetail',
        params: {
          id: index
        }
      })
    },
    companyClick() {
      console.log('拉了');
      this.$router.push({
        name: 'consultDetail',
        params: {
          id: 1
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.mains {
  background-color: #f7f6fb;
  // background-color: #999999;
  width: 100vw;
  //height: 100vh;
  height: 100%;
  overflow: auto;
  margin-top: 44px;
  // padding: 0 12px;
  .nav-bar {
    font-size: 16px;
    background-color: #fff;
    .icons {
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100%;
      }
    }
    .title-center {
      display: flex;
      line-height: 44px;
      justify-content: space-between;
      .desc {
        margin-right: 20px;
        &:nth-child(2) {
          margin-right: 0px;
          margin-left: 20px;
        }
      }
    }
  }
}
.container {
  // margin: 12px 0;
  padding: 0 12px;
  overflow: hidden;
  .company {
    background-color: #fff;
    margin-top: 12px;
    padding: 0 12px 12px;
    overflow: hidden;
    border-radius: 8px;
    .title {
      margin: 16px 0px 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      color: #1f0d44;
      font-weight: bolder;
    }
    .desc {
      font-size: 14px;
      color: #665e75;
      margin-bottom: 6px;
    }
    .imgs {
      width: 327px;
      height: 120px;
      margin-bottom: 12px;
      background-color: hotpink;
      border-radius: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .bottom-left {
        display: flex;

        .icons {
          width: 16px;
          height: 16px;
          margin-right: 4px;
          img {
            width: 100%;
            height: 100%;
            vertical-align: 10px;
          }
        }
        .text {
          font-size: 11px;
          color: #ff7e33;
        }
      }
      .bottom-right {
        font-size: 12px;
        color: #afabb7;
        display: flex;

        .icons {
          width: 13px;
          height: 10px;
          margin-right: 4px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .product {
    overflow: hidden;
  }
}
.bands {
  position: fixed;
  top: 44px;
  left: 0;
   width: 100%;
  z-index: 2;
}
.brands {
  overflow: hidden;

}
.line {
  display: block;
  width: 16px;
  height: 3px;
  margin: 8px auto 0;
  background: linear-gradient(#ff5bf4, #622ccc);
  margin-top: -8px;
}
.consult {
  font-size: 32px;
}
</style>
